<template>
  <van-popup
    v-model="value"
    position="bottom"
    :close-on-click-overlay="false"
    @click-overlay="onClose"
    style="borderRadius:0"
  >
    <van-radio-group v-model="active" class="list">
      <van-cell-group :border="false">
        <List v-model="loading" :finished="finished" :error.sync="error" @load="loadList">
          <van-cell clickable v-for="(item,index) in list" :key="index">
            <van-radio :name="item.store_id" class="item" @click="onSelect(item)">
              <div class="info">
                <div class="name">
                  <van-col span="18">{{item.store_name}}</van-col>
                  <van-col span="6" class="distance">{{item.distance | distance}}</van-col>
                </div>
                <div class="detail">
                  <van-col
                    span="24"
                  >{{item.province_name + item.city_name + item.dictrict_name + item.address}}</van-col>
                </div>
              </div>
            </van-radio>
          </van-cell>
        </List>
      </van-cell-group>
    </van-radio-group>
    <div class="fixed-foot-btn-group">
      <van-button size="normal" block round type="default" @click="onClose">关闭</van-button>
    </div>
  </van-popup>
</template>

<script>
import { GET_STORELIST } from "@/api/store";
import { list } from "@/mixins";
export default {
  data() {
    return {};
  },
  props: {
    store_id: [String, Number],
    shop_id: [String, Number],
    value: {
      type: Boolean,
      default: false
    },
    store_list: [Array, Boolean]
  },
  mixins: [list],
  filters: {
    distance(value) {
      return value + "km";
    }
  },
  watch: {
    value(e) {
      if (e) {
        this.loadData("init");
      }
    }
  },
  computed: {
    active: {
      get() {
        return this.store_id;
      },
      set(e) {}
    }
  },
  methods: {
    loadData(init) {
      if (this.store_list && typeof this.store_list != "boolean") {
        this.list = this.store_list;
        this.loading = false;
      } else {
        this.$store
          .dispatch("getBMapLocation")
          .then(({ location }) => {
            this.params.lng = location.lng;
            this.params.lat = location.lat;
            this.loadList(init);
          })
          .catch(error => {
            this.$Toast(error + "将显示所有门店");
            this.loadList(init);
          });
      }
    },
    loadList(init) {
      const $this = this;
      if (init && init === "init") {
        $this.initList();
      }
      $this.params.shop_id = $this.shop_id;
      GET_STORELIST($this.params, true)
        .then(({ data }) => {
          let list = data.store_list ? data.store_list : [];
          $this.pushToList(list, data.page_count, init);
        })
        .catch(() => {
          $this.loadError();
        });
    },
    onClose() {
      this.$emit("input", false);
    },
    onSelect(item) {
      this.$emit("select", item);
      this.onClose();
    }
  },
  beforeDestroy() {
    var iframes = document.getElementsByTagName("iframe")[0];
    iframes && iframes.remove();
  },
  components: {}
};
</script>

<style scoped>
.list {
  height: 100vh;
  padding-bottom: 80px;
  overflow-y: auto;
}

.item {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.item >>> .van-radio__label {
  flex: 1;
}

.distance {
  text-align: right;
  white-space: nowrap;
  color: #ff454e;
  font-size: 12px;
}

.detail {
  padding: 0;
  color: #909399;
  font-size: 12px;
}
</style>